<template>
  <div>
    <table class="mytable">
      <tr>
        <th style="width: 22%">Vale PO No</th>
        <td>{{entity.ordernumber}}</td>
      </tr>
      <tr>
        <th>Vale PO Date</th>
        <td><DateFormat :value="entity.orderdate" :format="'YYYY-MM-DD'"></DateFormat></td>
      </tr>
      <tr>
        <th>Vale SAP Code</th>
        <td>{{entity.valesapcode}}</td>
      </tr>
      <tr>
        <th>PO Value(US$)</th>
        <td>{{entity.povalue}}</td>
      </tr>
      <tr>
        <th>Quantity(Meter)</th>
        <td>{{entity.quantity}}</td>
      </tr>
      <tr>
        <th>Tech. Clarification</th>
        <td>{{entity.techclarification}}</td>
      </tr>
      <tr>
        <th>Invoice No</th>
        <td>{{entity.tnvoiceno}}</td>
      </tr>
      <tr>
        <th>Ref. No</th>
        <td>{{entity.refno}}</td>
      </tr>
      <tr>
        <th>Completed Status(%)</th>
        <td>{{entity.completedstatus}}</td>
      </tr>
      <tr>
        <th>Raw Material Preparation</th>
        <td>{{entity.rmp}}</td>
      </tr>
      <tr>
        <th>Production</th>
        <td>{{entity.production}}</td>
      </tr>
      <tr>
        <th>Inspection & Packing</th>
        <td>{{entity.inspectionpacking}}</td>
      </tr>
      <tr>
        <th>Planned Completion Date</th>
        <td><DateFormat :value="entity.pcd" :format="'YYYY-MM-DD'"></DateFormat></td>
      </tr>
      <tr>
        <th>Actual Completion Date</th>
        <td><DateFormat :value="entity.acd" :format="'YYYY-MM-DD'"></DateFormat></td>
      </tr>
      <tr>
        <th>Contract Delivery Date</th>
        <td><DateFormat :value="entity.cdd" :format="'YYYY-MM-DD'"></DateFormat></td>
      </tr>
      <tr>
        <th>ETD</th>
        <td><DateFormat :value="entity.etd" :format="'YYYY-MM-DD'"></DateFormat></td>
      </tr>
      <tr>
        <th>ETA</th>
        <td><DateFormat :value="entity.eta" :format="'YYYY-MM-DD'"></DateFormat></td>
      </tr>
      <tr>
        <th>Incoterms</th>
        <td>{{entity.incoterms}}</td>
      </tr>
      <tr>
        <th>Client Country</th>
        <td>{{entity.clientcountry}}</td>
      </tr>
      <tr>
        <th>Action Plan to Rectify</th>
        <td>{{entity.aptr}}</td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import {reactive, ref, onMounted, defineProps} from "vue";
import { useRoute } from "vue-router";
import request from "/@/utils/request";
import dayjs from "dayjs";

let props = defineProps({
  entityId : {type : Number, default: 0}
})
let entity = ref({
  kehuid:undefined,
  id : props.entityId,
  ordernumber: '',
  orderdate: '',
  valesapcode: '',
  povalue: '',
  quantity: '',
  techclarification: '',
  tnvoiceno: '',
  refno: '',
  completedstatus: '',
  rmp: '',
  production: '',
  inspectionpacking: '',
  pcd: '',
  acd: '',
  cdd: '',
  etd: '',
  eta: '',
  incoterms: '',
  clientcountry: '',
  aptr: '',
})
const loadEntity = ()=>{
  if(props.entityId > 0){
    request({ url: '/order/getordermx', data: {id : props.entityId} }).then( res =>{
      entity.value = res.data
      entity.value.orderdate= dayjs(entity.value.orderdate).format('YYYY-MM-DD')
      entity.value.pcd= dayjs(entity.value.pcd).format('YYYY-MM-DD')
      entity.value.acd= dayjs(entity.value.acd).format('YYYY-MM-DD')
      entity.value.cdd= dayjs(entity.value.cdd).format('YYYY-MM-DD')
      entity.value.etd= dayjs(entity.value.etd).format('YYYY-MM-DD')
      entity.value.eta= dayjs(entity.value.eta).format('YYYY-MM-DD')
    })
  }
}
onMounted(()=>{
  loadEntity()
})
</script>

<style scoped>
</style>
